<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="procurement_detail">
    <view :style="globalData.appStyle.customizeBarStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" title="销售详情" color="#FFFFFF" backgroundColor="#FF7C00">
        <block slot="left">
          <uni-icons color="white" class="icon-left" @click="navigateBackPage" type="left" size="23"></uni-icons>
          <uni-icons color="white" @click="switchTabPage(`/pages/procurementPage`, 1)" type="home" size="23"></uni-icons>
        </block>
      </uni-nav-bar>
    </view>

    <view :style="globalData.appStyle.customizeContentStyle">
      <!-- 未来flb关注的提示样式 -->
      <Gongzhonghao v-if="globalData.userInfo.isFollowOfficialAccount !== '1'" />
      <scroll-view :style="formContentStyle" scroll-y :class="['content_top', !globalData.userInfo.phoneNumber ? 'showBorder-top' : '']">
        <!-- 如果是合伙人发布的且非本人平机号码的商机，上面的公司栏位不显示，名字真接显示合伙人发布输入的联系人。不用换成应触易科技什么先生，什么小姐的 -->
        <view v-if="paramsObj.enterpriseInfo && paramsObj.enterpriseInfo.nature !== 0 && !(paramsObj.publisherIsPartner === '1' && paramsObj.PhoneNumber !== paramsObj.contactPhoneNumber)" class="card_box flr flb">
          <view class="flex1 card_title_name">{{ paramsObj.enterpriseInfo.enterpriseName }}</view>
          <view class="card_title_tag flr">
            <view v-if="paramsObj.isEnterpriseCertification == 1">企业认证</view>
            <view v-if="paramsObj.enterpriseInfo.nature">{{ natureInfo[Number(paramsObj.enterpriseInfo.nature)] }}</view>
          </view>
        </view>
        <view v-if="paramsObj.enterpriseInfo && paramsObj.enterpriseInfo.nature !== 0" class="content_line"> </view>
        <view class="card_box">
          <view class="common_title_style detail_info_title line-clamp-1"> {{ paramsObj.title }} </view>
          <view class="flr flb">
            <view class="flr">
              <image src="@/static/img/procurement/userTX.png" mode="scaleToFill" class="user_header_img" />
              <view>
                <view class="flca">
                  <view v-if="paramsObj.publisherIsPartner === '1' && paramsObj.PhoneNumber !== paramsObj.contactPhoneNumber" class="common_title_style" style="margin-right: 7rem; min-width: 45rem">
                    {{ paramsObj.contact }}
                  </view>
                  <view v-else class="common_title_style" style="margin-right: 7rem; min-width: 45rem">{{ paramsObj.contact ? paramsObj.contact[0] : '' }}{{ paramsObj.publisherGender === 'female' ? '女士' : '先生' }}</view>
                  <view class="title_hhr" v-if="globalData.userInfo.publisherIsPartner === '1'" style="margin-right: 10rem">合伙人</view>
                  <view class="title_phone">{{ displayPhoneNumber(paramsObj.contactPhoneNumber) }}</view>
                </view>
                <view class="fla" style="margin-top: 3rem">
                  <view class="normal_twelve_txt" v-if="globalData.userInfo.publisherIsRealName === '1'" style="margin-right: 6rem">已实名</view>
                  <img src="@/static/img/procurement/star.png" class="small_icons" />
                  <text class="normal_gray_txt mr4">{{ paramsObj.score ? paramsObj.score : 0.0 }}</text>
                  <img src="@/static/img/procurement/addLike.png" class="small_icons" />
                  <text class="normal_gray_txt mr4">{{ paramsObj.awardQty ? paramsObj.awardQty : 0 }}</text>
                  <img src="@/static/img/procurement/aixin.png" class="small_icons" />
                  <text class="normal_gray_txt mr4">{{ paramsObj.collectQty ? paramsObj.collectQty : 0 }}</text>
                </view>
              </view>
            </view>
            <view v-if="globalData.userInfo.id !== paramsObj.publishUserId" class="call_phone_box flca" @click="callPhone(paramsObj)">
              <img src="@/static/img/procurement/phone_icon.png" class="phone_icon" />
              <text class="phone_txt">拨打电话</text>
            </view>
          </view>
        </view>
        <view class="content_line"> </view>
        <view class="notice_content">
          <uni-notice-bar background-color="#fff" :scrollable="true" single :text="paramsObj.publisherIsPartner ? noticeBarInfo[Number(paramsObj.publisherIsPartner)] : ''"></uni-notice-bar>
        </view>
        <!-- 详情 -->
        <view class="card_box card_box_bg">
          <view class="flr">
            <view class="common_title_style" style="margin-right: 7rem">详情</view>
            <view class="flr flw flex1">
              <view v-for="(label, key) in paramsObj.labels.split(',').filter(el => el) || []" :key="key" :class="key < 2 ? 'small_orange_bg_tag' : 'small_gray_bg_tag'">
                {{ label }}
              </view>
            </view>
            <view class="flca" @click="closeOrShow = !closeOrShow">
              <view class="one_limit">限{{ paramsObj.contactLimit ? paramsObj.contactLimit : 1 }}人</view>
              <img src="@/static/img/procurement/close_show.png" :class="closeOrShow ? 'close_show_icon' : 'show_close_icon'" />
            </view>
          </view>
          <view :class="{ content_desc_detail: true, 'line-clamp-1': !closeOrShow }">{{ paramsObj.detailInfo }}</view>
          <view v-show="closeOrShow">
            <view class="fla" v-if="paramsObj.fileName">
              <img src="@/static/img/procurement/file_icon.png" class="file_icon" />
              <text style="font-size: 14rem">附件：{{ paramsObj.fileName }}</text>
            </view>
            <view v-if="paramsObj.picsUrl && paramsObj.picsUrl.length" class="flc">
              <image v-for="(img, imgIndex) in paramsObj.picsUrl" mode="widthFix" :key="imgIndex" :src="img" class="file_bg" @click="previewImageList(img, paramsObj.picsUrl)" />
            </view>
          </view>
          <view style="margin-top: 5rem; color: rgba(166, 166, 166, 1); font-size: 12rem">
            <text style="padding-right: 11rem">{{ paramsObj.createTime }}</text>
            <text> IP属地：{{ paramsObj.deliveryAddress }}</text>
          </view>
        </view>
        <!-- 无忧电话 -->
        <view class="card_box card_box_bg">
          <view class="flca flb">
            <view class="flca">
              <img src="@/static/img/procurement/anbao.png" class="anbao" />
              <view class="common_title_style">安全保障</view>
            </view>
            <view class="flca">
              <view class="common_font_size_14" style="margin-right: 8rem">查看</view>
              <uni-icons type="right" size="14"></uni-icons>
            </view>
          </view>
          <view class="common_font_size_14 mtb10">
            联系
            <text style="color: #ff7000" class="mr4"> 无忧 </text>
            <text style="color: #ff7000"> 使用安全好拨打-打不通自动退积分</text>
          </view>
          <view class="common_font_size_14" @click="callNumber(globalData.platformInfo.CUSTOMER_SERVICE_TEL)">
            如遇到线下缴费，帮忙介绍供应商、客户等违规行为，请立即向E商机
            <text class="normal_orange_txt ml10">投诉举报</text>
            <uni-icons type="right" color="#ff7000" size="16"></uni-icons>
          </view>
        </view>
        <!-- 评论 -->
        <view class="card_box card_box_bg">
          <view class="flca flb">
            <view class="flca">
              <img src="@/static/img/procurement/pinglun.png" class="pinglun" />
              <view class="common_title_style">评论</view>
            </view>
            <view class="flca">
              <view class="common_font_size_14" style="margin-right: 8rem" @click="jumpToPage('')">全部评论</view>
              <uni-icons type="right" size="14"></uni-icons>
            </view>
          </view>
          <view v-if="paramsObj.latestComment" style="margin-top: 15rem">
            <view class="fla flb">
              <view class="fla">
                <image src="@/static/img/procurement/userTX.png" mode="scaleToFill" class="small_user_header_img" />
                <text>{{ paramsObj.latestComment.nickName || '匿名' }}</text>
              </view>
              <view class="fla">
                <text class="phone_txt">好评度</text>
                <uni-rate size="16" :readonly="true" v-model="paramsObj.latestComment.score" />
              </view>
            </view>
            <view class="flr" style="margin-top: 6rem">
              <text class="ell1 line-clamp-1 flex1 mr4">{{ paramsObj.latestComment.content }}</text>
              <text class="f14" style="color: rgba(128, 128, 128, 1)">{{ paramsObj.latestComment.createTime }}</text>
            </view>
          </view>
        </view>
        <!-- 相似需求 -->
        <view class="card_box card_box_bg">
          <view class="flca flb">
            <view class="flca">
              <img src="@/static/img/procurement/xuqiu.png" class="pinglun" />
              <view class="common_title_style">相似需求</view>
            </view>
            <view class="flca" @click="switchTabPage('/pages/salePage', 2)">
              <view class="common_font_size_14" style="margin-right: 8rem">获取更多需求</view>
              <uni-icons type="right" size="14"></uni-icons>
            </view>
          </view>
          <view v-if="paramsObj.latestSimilarInfo" @click="jumpToSameDetail()">
            <view class="content_desc_detail line-clamp-4">{{ paramsObj.latestSimilarInfo.title ? paramsObj.latestSimilarInfo.title : paramsObj.latestSimilarInfo.detailInfo }}</view>
            <view class="flr flw flex1">
              <view v-for="(label, key) in paramsObj.latestSimilarInfo.labels.split(',').filter(el => el) || []" :key="key" :class="key < 2 ? 'small_orange_bg_tag' : 'small_gray_bg_tag'">
                {{ label }}
              </view>
            </view>
            <view class="flr flb mt15 flca">
              <view class="flca">
                <img src="@/static/img/procurement/position.png" class="pinglun" />
                <text class="position_label"> {{ paramsObj.latestSimilarInfo.deliveryAddress }}</text>
              </view>
              <view class="flca">
                <text style="padding-right: 11rem" class="position_label">{{ formatDateTime(paramsObj.latestSimilarInfo.createTime, 'zh') }}</text>
                <view v-if="globalData.userInfo.id !== paramsObj.publishUserId" class="call_phone_box_need flca" @click.stop="callPhone(paramsObj.latestSimilarInfo)">
                  <img src="@/static/img/procurement/phone_need.png" class="phone_icon" />
                  <text class="phone_txt">拨打电话</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- <view @click="openEvaluated">打开评价弹窗</view> -->
      <uni-popup ref="popup" type="bottom" class="evaluated-popup" :is-mask-click="false" background-color="#fff" border-radius="20rem 20rem 0 0">
        <to-be-evaluated :targetIdInfo="targetIdInfo" :showType="2" @closePopup="closePopup" />
      </uni-popup>
      <call-tips ref="callTips" @openEvaluated="openEvaluated" />
      <u-button type="primary" plain size="large" :custom-style="btnStyle1" :throttleTime="500" @click="btnClick1">
        <uni-icons type="heart-filled" :color="btnColor1" size="29" />
      </u-button>
      <u-button type="primary" plain size="large" :custom-style="btnStyle2" :throttleTime="500" @click="btnClick2">
        <uni-icons type="star-filled" :color="btnColor2" size="29" />
      </u-button>
      <u-button type="primary" plain size="large" :custom-style="btnStyle3" :throttleTime="200" open-type="share">
        <uni-icons type="redo-filled" color="#6B8CFC" size="29" />
      </u-button>
      <FixedBottomBtnCustom v-if="showBottomContent.status === ''">
        <template #inner>
          <view @click="switchTabPage('/pages/salePage', 2)" class="go_list_btn" :style="globalData.userInfo.id !== paramsObj.publishUserId ? 'bottom:70rem' : 'bottom:0'"> 前往销售列表查看更多需求 </view>
          <view v-if="globalData.userInfo.id !== paramsObj.publishUserId" class="block_content"> </view>
          <view v-if="globalData.userInfo.id !== paramsObj.publishUserId" class="call_phone_bottom_btn flca">
            <view class="inner-btn" @click="callPhone(paramsObj)">
              <img src="@/static/img/procurement/phone_icon.png" class="phone_icon" />
              <text>拨打电话</text>
            </view>
          </view>
        </template>
      </FixedBottomBtnCustom>
      <FixedBottomBtnCustom v-else-if="showBottomContent.type === 'modify'" :oneBtn="true" :btnText="['修改']" @btnFun="jumpToDetail" />
      <FixedBottomBtnCustom v-else-if="showBottomContent.type === 'republish'" :twoBtn="true" :btnText="['修改', '重新发布']" @btnFun="jumpToDetail" @functionSecond="jumpToDetail" />
    </view>
  </view>
</template>

<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
import FixedBottomBtnCustom from '@/component/FixedBottomBtnCustom.vue';
import FixedBottomBtn from '@/component/FixedBottomBtn.vue';
import ToBeEvaluated from '@/component/ToBeEvaluated.vue';
import CallTips from '@/component/call-phone-tips/index.vue';
import Gongzhonghao from '@/component/Gongzhonghao.vue';
export default {
  mixins: [commonMxins],
  components: { Gongzhonghao, FixedBottomBtnCustom, FixedBottomBtn, ToBeEvaluated, CallTips },
  data() {
    return {
      targetIdInfo: { targetId: '', startTime: '', releaseTime: '' },
      btnStyle1: {
        border: 'none',
        padding: '0',
        background: 'transparent',
        position: 'fixed',
        bottom: '39%',
        right: '14rem',
        width: '24rem',
        height: '24rem'
      },
      btnStyle2: {
        border: 'none',
        padding: '0',
        position: 'fixed',
        background: 'transparent',
        bottom: '32%',
        right: '14rem',
        width: '24rem',
        height: '24rem'
      },
      btnStyle3: {
        border: 'none',
        padding: '0',
        position: 'fixed',
        background: 'transparent',
        bottom: '25%',
        right: '14rem',
        width: '24rem',
        height: '24rem'
      },
      btnColor1: '#a8a8a8',
      btnColor2: '#a8a8a8',
      noticeBarInfo: ['', '此商机由合伙人代发，需求方不一定是XX先生/女士，打不通全额退积分，差评全额退积分，恶意差评将会导致账号被封。', '打不通全额退积分，差评全额退积分，恶意差评将会导致账号被封。'],
      natureInfo: ['', '上市公司', '央企', '民企(制造)', '民企(代理)'],
      formContentStyle: '',
      commontList: [],
      closeOrShow: true, // 详情展示
      paramsObj: {
        labels: '',
        picsUrl: '',
        latestSimilarInfo: {
          labels: '',
          createTime: ''
        },
        enterpriseInfo: {
          nature: 0,
          enterpriseName: ''
        }
      },
      saleInfo: {},
      showBottomContent: {
        status: '',
        type: ''
      }
    };
  },
  async onLoad(options) {
    // type 默认'' look表示查看modify表示修改republish表示重新发布
    // status 1-审核中 2-正在找 3-未通过 4-已下架
    // showType 1-普通发布 2-快捷发布
    this.globalData.userInfo = { ...this.globalData.userInfo, shareId: options.shareId };
    this.showBottomContent = {
      status: options.status ? options.status : '',
      type: options.type ? options.type : '',
      saleInfoId: options.saleInfoId ? options.saleInfoId : ''
    };
    await this.queryDetail(options.saleInfoId);
    // 关注page高度
    const gzHeight = this.globalData.userInfo.phoneNumber ? 0 : 55 * this.globalData.pageHeightProportion;
    const bottomHeight = 55 * this.globalData.pageHeightProportion;
    switch (this.showBottomContent.type) {
      case 'modify':
        this.formContentStyle = `height: ${this.globalData.customizeInfo.customizeContentHeight - gzHeight - bottomHeight}rem`;
        break;
      case 'republish':
        this.formContentStyle = `height: ${this.globalData.customizeInfo.customizeContentHeight - gzHeight - bottomHeight}rem`;
        break;
      case 'look':
        this.formContentStyle = `height: ${this.globalData.customizeInfo.customizeContentHeight - gzHeight}rem`;
        break;
      default:
        if (this.globalData.userInfo.id !== this.paramsObj.publishUserId) {
          this.formContentStyle = `height: ${this.globalData.customizeInfo.customizeContentHeight - gzHeight - 80 * this.globalData.pageHeightProportion}rem`;
        } else {
          this.formContentStyle = `height: ${this.globalData.customizeInfo.customizeContentHeight - gzHeight - bottomHeight}rem`;
        }
        break;
    }
    this.btnColor1 = this.saleInfo.isAlreadyAward === '1' ? '#FF5733' : '#a8a8a8';
    this.btnColor2 = this.saleInfo.isAlreadyCollect === '1' ? '#FFC300' : '#a8a8a8';
  },
  methods: {
    onShareAppMessage(res) {
      return {
        title: this.saleInfo.title || this.saleInfo.detailInfo,
        path: `/pages/sale/detail/index?saleInfoId=${this.showBottomContent.saleInfoId}&shareId=${this.globalData.userInfo.id}`
      };
    },
    onShareTimeline(res) {
      let imageUrl = this.$purchaseUrl;
      if (this.paramsObj.picsUrl && this.paramsObj.picsUrl.length > 0) {
        imageUrl = this.paramsObj.picsUrl[0];
      }
      return {
        title: this.saleInfo.title || this.saleInfo.detailInfo,
        path: `/pages/sale/detail/index?saleInfoId=${this.showBottomContent.saleInfoId}`,
        imageUrl
      };
    },
    // 拨号
    callNumber(num) {
      uni.makePhoneCall({
        phoneNumber: num,
        success: result => {},
        fail: error => {}
      });
    },
    async btnClick1() {
      let url = this.saleInfo.isAlreadyAward === '1' ? '/saleInfo/cancelAward' : '/saleInfo/award';
      let method = this.saleInfo.isAlreadyAward === '1' ? 'GET' : 'POST';
      const res = await api.request({ url, data: { saleInfoId: this.showBottomContent.saleInfoId }, method });
      await this.queryDetail(this.showBottomContent.saleInfoId);
      this.btnColor1 = this.saleInfo.isAlreadyAward === '1' ? '#FF5733' : '#a8a8a8';
    },
    async btnClick2() {
      let url = this.saleInfo.isAlreadyCollect === '1' ? '/saleInfo/cancelCollect' : '/saleInfo/collect';
      let method = this.saleInfo.isAlreadyCollect === '1' ? 'GET' : 'POST';
      await api.request({ url, data: { saleInfoId: this.showBottomContent.saleInfoId }, method });
      await this.queryDetail(this.showBottomContent.saleInfoId);
      this.btnColor2 = this.saleInfo.isAlreadyCollect === '1' ? '#FFC300' : '#a8a8a8';
    },
    // 页面跳转
    jumpToPage(url) {
      uni.navigateTo({ url });
    },
    // 跳转至相似项目详情
    jumpToSameDetail() {
      uni.navigateTo({ url: `/pages/sale/detail/index?saleInfoId=${this.paramsObj.latestSimilarInfo.id}` });
    },
    switchTabPage(url, type) {
      type === 2 && uni.setStorageSync('categoryName', this.paramsObj.categoryName);
      uni.switchTab({ url });
    },
    // 关闭评价弹窗
    closePopup() {
      this.$refs.popup.close();
    },
    // 打开评价弹窗
    openEvaluated(targetIdInfo) {
      this.targetIdInfo = targetIdInfo;
      this.$refs.popup.open('bottom');
    },
    // 跳转至编辑页面
    jumpToDetail() {
      uni.navigateTo({ url: `/pages/sale/add/index?saleInfoId=${this.showBottomContent.saleInfoId}&status=${this.showBottomContent.status}&type=${this.showBottomContent.type}` });
    },
    // 回退
    navigateBackPage() {
      uni.navigateBack({ delta: 1 });
    },
    // 查询详情
    async queryDetail(saleInfoId) {
      const res = await api.request({ url: '/saleInfo/getInfo', data: { saleInfoId }, method: 'GET' });
      this.saleInfo = res.data;
      this.paramsObj = { ...res.data, picsUrl: res.data.picsUrl ? res.data.picsUrl.split(',').filter(el => el) : [] };
      console.log('paramsObj', this.paramsObj.picsUrl);
    },
    callPhone({ id }) {
      if (!this.globalData.userInfo.phoneNumber) {
        uni.navigateTo({ url: '/pages/global/authorizePhone' });
      } else {
        this.$refs.callTips.open(String(id), 2);
      }
    },
    // 图片预览
    previewImageList(current, urls) {
      uni.previewImage({
        current,
        urls
      });
    },
    // 跳转无忧安全页面
    goSafePage() {},
    // 跳转评论页面
    goRemarkPage() {}
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
